<template>
     <div class="atoname" :class="datas.cmpt_class || []" :style="datas.cmpt_style || {}">
        <div class="loginForm">
            <div class="login">
                <el-row class="sysTitle">
                    <el-col>{{attr_data_conf.system_title}}</el-col>
                </el-row>
                <el-row class="loginInfo">
                    <el-form 
                        :model="submitForm" 
                        ref="submitForm" 
                        label-width="80px">
                        <template v-if="submitForm.data">
                            <span v-for="(item,index) in submitForm.data" :key="index">
                                <el-form-item
                                    style="margin-bottom:10px;"
                                    label-width="0px">
                                    <template v-if="item.judgeType==='checkbox'">
                                        <el-checkbox class="allcheckbox" v-for="(ite,index) in item.checkboxData" :key="index" v-model="ite.value" :label="ite.label"></el-checkbox>
                                    </template>
                                    <el-button v-if="item.judgeType==='btn'" class="lostPassword" type="text" @click.native="forgetPassword(item)">忘记密码</el-button>
                                    <div v-if="item.judgeType==='login'" class="loginButton" @click="submit(submitForm.data,'submitForm',item)">{{item.btnContent}}</div>
                                </el-form-item>
                                <el-form-item
                                    :label="item.label" 
                                    :rules="item.rules"    
                                    v-if="item.judgeType==='input'"
                                    :prop="`data[${index}].value`">
                                    <el-input :type="item.type" :placeholder="item.placeholder" @change="valueChange(item)" v-model="item.value"></el-input>
                                </el-form-item>
                            </span>
                        </template>
                        
                    </el-form>
                </el-row>
            </div>
        </div>
       
    </div>
</template>
<script>
import Axios from 'axios'
export default {
    name: 'loginComponent',
    props: {
        datas:{
            type: Object,
            default() {
                return {
                    attr_data_conf:{
                        system_title: '系统名称',
                        login_data:[
                            {
                                key:'user_name',
                                judgeType:'input',
                                eName:'nameChange',
                                placeholder:'',
                                rules:[
                                    {
                                        required:true,
                                        trigger:'blur',
                                        message:'用户名不能为空'
                                    }
                                ],
                                label:'用户名',
                                value:'',
                                type:'text'
                            },
                            {
                                key:'password',
                                judgeType:'input',
                                eName:'psdChange',
                                placeholder:'',
                                rules:[
                                    {
                                        required:true,
                                        trigger:'blur',
                                        message:'密码不能为空'
                                    }
                                ],
                                label:'密码',
                                value:'',
                                type:'password'
                            },
                            {
                                judgeType:'checkbox',
                                checkboxData:[
                                    {
                                        label:'自动登录',
                                        value:false
                                    },
                                    {
                                        label:'记住密码',
                                        value:false
                                    }
                                ]
                            },
                            {
                                judgeType:'btn',
                                eName:'forgetPsd',
                                btnType:'',
                                btnSize:'mini',
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:'忘记密码'
                            },
                            {
                                judgeType:'login',
                                eName:'login',
                                btnType:'',
                                btnSize:'mini',
                                btnRound:false,
                                btnCircle:false,
                                btnLoading:false,
                                btnDisabled:false,
                                btnContent:'登录'
                            }
                        ]
                    },
                    //接口时间配置 name必须与组件数据配置中的eName一致
                    intf_eName_conf:[
                        {
                            name:'login',
                            params:'参数说明'
                        }
                    ],
                    intf:{
                        login:{
                            path: 'v1/api/users/login',
                            req_method: 'post'
                        }
                    },
                    cross_parameter_name: 'mr',
                    event_ele_conf:`{
                        nameChange:function(data){
                            this.username=data;
                        },
                        psdChange:function(data){
                            this.userPassword=data;
                        },
                        login:function(data,ref){
                            this.$refs[ref].validate(validate => {
                                if(validate){
                                }
                            });
                        },
                        forgetPsd:function(a){
                        }
                    }`,
                    mounted:`function () {
                    }`,
                    cmpt_class:[],
                    cmpt_style:{}
                }
            }
        }
    },
    data () {
        return {
            submitForm: {
                data: {}
            },
            username:'',
            userpassword:'',
            attr_data_conf:{}
        }
    },
    created(){
        if(typeof(this.datas.attr_data_conf) == 'string'){
            this.attr_data_conf = new Function(`return ${this.datas.attr_data_conf}`)()
        }else{
            this.attr_data_conf = this.datas.attr_data_conf
        }
        if(typeof(this.datas.mounted) == 'string'){
            let extraMounted = new Function(`return ${this.datas.mounted}`)();
            let mountedFun = extraMounted.bind(this)
            mountedFun();
        }else if(typeof(this.datas.mounted) == 'function'){
            let mountedFun = this.datas.mounted.bind(this)
            mountedFun();
        }
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        let defaultEvts = ["beforeCreate","created","beforeMount","mounted","beforeUpdate","updated","beforeDestroy","destroyed",];
        Object.keys(extraMethods).forEach(key => {
            if(!defaultEvts.includes(key)){
                this[key] = extraMethods[key].bind(this);
            }
        });
        if(extraMethods.created){
            extraMethods.created.bind(this)();
        }
    },
    mounted () {
        let extraMethods = new Function(`return ${this.datas.event_ele_conf}`)();
        if(extraMethods.mounted){
            extraMethods.mounted.bind(this)();
        }
        this.submitForm.data = this.attr_data_conf.login_data;
        this.getCookie('cmpt_user_info');
    },
    methods: {
        valueChange(item){
            this[item.eName](item.value)
        },
        forgetPassword (item) {
            this[item.eName](item)
        },
        //设置cookie
        setCookie(cname, cvalue) {
            document.cookie = cname + "=" + escape(cvalue);
        },
        //获取cookie
        getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1);
                if (c.indexOf(name) != -1){
                    var cnamValue = unescape(c.substring(name.length, c.length));
                    for(var i in this.submitForm.data){
                        if(this.submitForm.data[i].type ==='text')this.submitForm.data[i].value =  cnamValue.split('=')[0];
                        if(this.submitForm.data[i].type ==='password')this.submitForm.data[i].value =  cnamValue.split('=')[1];
                    }
                } 
            }
        },
        //清除cookie  
        clearCookie(cname) {  
            setCookie(cname, "", -1);  
        },
        submit (form,ref,item) {
            const value = form[0].value + '=' + form[1].value;
            this.setCookie('cmpt_user_info', value);
            this[item.eName](form,ref);
        }
    }
}
</script>
<style lang="less" scoped>
.loginForm{
    display: flex;
    justify-content: center;
    .login{
        display: flex;
        flex-direction: column;
        width: 350px;
        border-radius:25px;
        box-sizing: border-box;
        padding: 10px 20px 0 20px;
        background:rgba(255,255,255,.95);
        box-shadow:0 0 45px rgba(0,0,0,.18);
        .sysTitle{
            text-align: center;
            font-size: 2em;
            margin-bottom: 0.5em;
        }
        .allcheckbox{
            position: relative;
        }
        .lostPassword{
            position: absolute;
            right: 0;
            bottom: 10px;
        }
        .loginButton{
            border-radius: 10px;
            text-align: center;
            color: #fff;
            background: #409eff;
            cursor: pointer;
        }
        
    }
}

</style>
